<template>
  <div>
    <div class="header">
      <home-header></home-header>
      <home-tabs></home-tabs>
    </div>

    <!-- <keep-alive>
      <transition-group :name="animateClass" mode="out-in">
        <template v-for="(item, index) of comps">
          <component
            :key="item"
            :is="item"
            class="comp"
            v-if="index === showCompIndex"
          ></component>
        </template>
      </transition-group>
    </keep-alive> -->

    <transition :name="animateClass">
      <keep-alive>
        <component :is="comps[showCompIndex]" class="comp"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import HomeHeader from './home-header'
import HomeTabs from './home-tabs'
import { mapGetters, mapActions } from 'vuex'
const Recommend = () => import('./components/recommend')
const Phone = () => import('./components/phone')
const Intelligent = () => import('./components/intelligent')
const Television = () => import('./components/television')
const Laptop = () => import('./components/laptop')
const Periphery = () => import('./components/periphery')

export default {
  data() {
    return {
      comps: [
        'recommend',
        'phone',
        'intelligent',
        'television',
        'laptop',
        'periphery'
      ]
    }
  },
  computed: {
    ...mapGetters(['showCompIndex', 'prevCompIndex']),
    currentTComp() {
      return this.comps[this.showCompIndex]
    },
    animateClass() {
      return this.showCompIndex > this.prevCompIndex
        ? 'left-fade'
        : 'right-fade'
    }
  },
  components: {
    HomeHeader,
    HomeTabs,
    Recommend,
    Phone,
    Intelligent,
    Television,
    Laptop,
    Periphery
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.header {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.comp {
  position: fixed;
  top: 1.41rem;
  left: 0;
  bottom: 52px;
  width: 100%;
  overflow: hidden;
}

.left-fade-enter-active, .left-fade-leave-active, .right-fade-enter-active, .right-fade-leave-active {
  transition: all ease-out 0.3s;
}

.left-fade-enter {
  transform: translate3d(100%, 0, 0);
}

.left-fade-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.right-fade-enter {
  transform: translate3d(-100%, 0, 0);
}

.right-fade-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>